<route>
    {
        meta: {
            layout: 'index',
            title:'岗位管理'
        }
    }  
</route>
<template>
    <view>
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="6" :xs="24">
                <JobTypeSelect @confirm="typeConfirm" />
            </el-col>
            <el-col :span="18" :xs="24">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain :icon="Plus" @click="doCreate" v-isAdmin>新增</el-button>
                    </el-col>
                </el-row>
                <!-- 表格数据 -->
                <el-table v-loading="loading" :data="tableData">
                    <el-table-column label="岗位分类" prop="jobType" :show-overflow-tooltip="true" width="150" />
                    <el-table-column label="职级" prop="jobGrade" :show-overflow-tooltip="true" width="150" />
                    <el-table-column label="岗位名称" prop="jobName" :show-overflow-tooltip="true" width="150" />
                    <el-table-column label="岗位编码" prop="jobCode" :show-overflow-tooltip="true" />
                    <el-table-column label="职级排序" prop="orderNum" :show-overflow-tooltip="true" />
                    <el-table-column label="状态" align="center" width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="handleStatusChange(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                                <el-button type="text" :icon="Edit" @click="doUpdate(scope.row)"
                                    v-hasPermi="['system:role:update']"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                                <el-button type="text" :icon="Delete" @click="doDelete(scope.row)"
                                    v-hasPermi="['system:role:delete']"></el-button>
                            </el-tooltip>
                            <el-tooltip content="工作量" placement="top" v-if="scope.row.roleId !== 1">
                                <el-button type="text" :icon="User" @click="handleWorKload(scope.row)"
                                    v-hasPermi="['system:role:update']"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" width="150" />
                </el-table>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="doQuery" />
            </el-col>
        </el-row>
        <AntdConfirmModal :title="isCreate ? '新建岗位' : '更新岗位'" ref="modalRef" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 6 }">
                <a-form-item label="职级选择" name="jobGradeId" :rules="[{ required: true, message: '请选择职级' }]">
                    <a-tree-select v-model:value="form.jobGradeId" tree-data-simple-mode style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择职级"
                        :load-data="lazyLoadData" />
                </a-form-item>
                <a-form-item label="岗位名称" name="jobName" :rules="[{ required: true, message: '请输入岗位名称' }]">
                    <a-input v-model:value="form.jobName" />
                </a-form-item>
                <a-form-item label="岗位编码" name="jobCode" :rules="[{ required: true, message: '请输入岗位编码' }]">
                    <a-input v-model:value="form.jobCode" />
                </a-form-item>
                <!-- <a-form-item label="职级系数" name="standard" :rules="[{ required: true, message: '请输入职级系数' }]">
                    <a-input-number v-model:value="form.standard" />
                </a-form-item> -->
                <a-form-item label="岗位状态">
                    <a-switch v-model:checked="form.status" :checkedValue="1" :unCheckedValue="0" />
                </a-form-item>
                <a-form-item label="职级排序" name="orderNum">
                    <a-input-number v-model:value="form.orderNum" />
                </a-form-item>
                <a-form-item :name="remark" label="备注">
                    <a-textarea v-model:value="form.remark" />
                </a-form-item>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { Plus, Edit, Delete, User } from '@element-plus/icons-vue'
import JobTypeSelect from './components/JobTypeSelect.vue';
import useJobStore from '../../store/job';
import { createOne, updateOne, deleteOne, queryList, queryOne } from '../../api/job'
import { queryList as queryGrade } from '../../api/job_grade'
import useApp from '@/hooks'
const { $, proxy } = useApp()
const jobStore = useJobStore()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const modalRef = ref(null)
const isCreate = ref(false)
const queryParams = ref({
    jobTypeId: undefined,
    pageSize: 10,
    pageNum: 1
})
const treeData = ref([])

const lazyLoadData = ((treeNode) => {
    const { id } = treeNode.dataRef;
    //console.log(id)
    return new Promise(function (resolve, reject) {
        queryGrade({
            pageSize: 100,
            pageNum: 1,
            sortBy: 'orderNum',
            jobTypeId: id
        }).then(res => {
            let arr = res.content;
            arr.forEach(ele => {
                ele.value = ele.id;
                ele.title = ele.jobGradeName
                ele.pid = id
                ele.isLeaf = true
            })
            treeNode.dataRef.children = arr
            treeData.value.forEach(ele => {
                if (ele.id == id) {
                    ele.children = arr
                }
            })
            resolve(true)
        })
    })
})
// ref([
//     { id: 1, pId: 0, value: '1', title: 'Expand to load' },
//     { id: 2, pId: 0, value: '2', title: 'Expand to load' },
//     { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
// ])
const form = ref({
    jobGradeId: undefined,
    jobName: undefined,
    jobCode: undefined,
    orderNum: 1,
    status: 1,
    remark: undefined
})
// 点击确认
function typeConfirm(e) {
    queryParams.value.jobTypeId = e
    doQuery()
}
// 表单重置
function resetForm() {
    form.value = {
        jobGradeId: undefined,
        jobName: undefined,
        jobCode: undefined,
        orderNum: 1,
        status: 1,
        remark: undefined
    }
}
// 新增
function doCreate() {
    resetForm()
    isCreate.value = true
    modalRef.value.openModal()
}
// 删除
function doDelete(row) {
    $.showModal({
        title: '确认提醒',
        type: 'warning',
        content: `是否删除${row.jobName}`,
        cancelText: '取消'
    }).then(r => {
        if (r.confirm) {
            deleteOne(row.id).then(res => {
                $.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
                doQuery()
            })
        } else {

        }
    })
}
// 改
function doUpdate(row) {
    isCreate.value = false
    queryOne(row.id).then(res => {
        form.value = res
        form.value.jobTypeId = res.jobTypeId
        modalRef.value.openModal()
    })
}
// 查
function doQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 提交
function submitForm() {
    if (isCreate.value) {
        createOne(form.value).then(res => {
            console.log(res)
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            doQuery()
            modalRef.value.closeModal()
        })
    } else {
        updateOne(form.value).then(res => {
            console.log(res)
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
            doQuery()
            modalRef.value.closeModal()
        })
    }

}
function handleWorKload(row) {
    $.navigateTo({
        url: '/nepu/job/' + row.id
    })
}
// 跳转
function doEditExt(row) {
    $.navigateTo({
        url: '/nepu/job/' + row.id
    })
}
doQuery()
jobStore.getTypes().then(res => {
    let types = $.freeStore(res)
    types.forEach(ele => {
        ele.value = ele.id
        ele.title = ele.jobTypeName
        ele.isLeaf = false
        ele.pid = 0
        ele.selectable = false
    })
    treeData.value = types
})
</script>